<template>
	<view class="f24r col313131 poRel minH100v">
		<navbar background="background-image: linear-gradient(to right, #2c6739, #99c043);"
			title="房间详情" back @onBack="goBack"
		></navbar>
		<view class="pl10r pt10r pr10r pb120r poRel">
			<view class="poRel">
				<swiper class="h400r" :indicator-dots="true" :autoplay="true">
					<swiper-item v-for="(item, index) in bannerList" :key="index">
						<image :src="item" mode="aspectFill"
							class="wPer100 hPer100 borRad10r"
							@click="cliBannerImg(0, index)"
						></image>
					</swiper-item>
					<swiper-item v-if="bannerList.length == 0">
						<image src="/static/images/logo.png" mode="aspectFill"
							class="wPer100 hPer100 borRad10r"
							@click="cliBannerImg(1)"
						></image>
					</swiper-item>
				</swiper>
				<view class="w100r h78r borRad50P backImgLiGrTR2c6739a99c043 poAbs top10r rig10r teAliCenter pt22r colFff f20r">
					{{optionItem.hour ? optionItem.hour : ''}}小时
					<view>
						起订
					</view>
				</view>
			</view>
			<view class="p20r mt20r borRad10r backColWhite">
				<view class="disFlex aliItCenter">
					<view class="flex1 f32r foWeiBold">
						{{optionItem.name}}
					</view>
				</view>
				<view class="disFlex mt20r aliItCenter">
					<view class="flex1 colFf3627">
						会员
						¥
						<text class="f32r foWeiBold">
							{{optionItem.vip_price}}
						</text>
						/小时
						<text class="col999">
							原价¥{{optionItem.price}}/小时
						</text>
					</view>
					<view class="teAliRight backColF2f3fc col3f4b92 lh40r pl10r pr10r">
						推荐人数：{{optionItem.people_count}}人
					</view>
				</view>
				<view class="disFlex aliItCenter mt20r">
					<view :class="['flex1',
							membershipCard.type == 1 ? 'col99c043' : 'col999'
						]"
					>
						{{
							membershipCard.type == 1 ? '您为会员' :
							membershipCard.type == 2 ? '会员已到期' : '您非会员'
						}}
					</view>
					<view class="flex1 col999 teAliRight">
						是否必购套餐：{{
							optionItem.set_meal_type == 1 ? '是' :
							optionItem.set_meal_type == 2 ? '否' : optionItem.set_meal_type
						}}
					</view>
					<!-- <view class="flex1" @click="cliAddress">
						<image :src="baseUrl + 'iconLocaLightGreen.png'" mode="aspectFit"
							class="w30r h30r mr10r poRel top4r"
						></image>
						<text>
							福建省泉州市南安市曙宁大厦六楼
						</text>
					</view> -->
					<!-- <view class="">
						<view class="col747474">
							<view class="lh50r pl20r pr20r floRight bor1SDee2e6 borRad25r"
								@click="cliPhoneGray"
							>
								<image :src="baseUrl + 'iconPhoneGreen.png'" mode="aspectFit"
									class="w30r h30r mr10r poRel top4r"
								></image>
								<text>
									联系商家
								</text>
							</view>
						</view>
					</view> -->
				</view>
				<view class="mt20r pt20r borT1DC5c5c5">
					<view class="disFlex">
						<!-- <view :class="['flex1']">
							<picker mode="date" :value="pick1Val" :start="startDate"
								@change="pick1Change" :end="endDate"
							>
								<text class="floLeft lh50r">
									预订状态-{{pick1Val}}
								</text>
								<image :src="baseUrl + 'iconBottomGreen.png'" mode="aspectFit"
									class="w50r h50r floLeft"
								></image>
							</picker>
						</view> -->
						<view class="flex1 teAliRight h30r f20r">
							<text class="disInBlo w30r h30r backCol99c043 poRel top8r mr10r"
							></text>
							<text>
								不可预订
							</text>
							<text class="disInBlo w30r h30r backColEcecec poRel top8r mr10r ml40r"
							></text>
							<text>
								可预订
							</text>
						</view>
					</view>
					<view class="disFlex mt20r borRad10r overHid">
						<view v-for="(item, index1) in colorAry" :key="index1"
							:class="['poRel', 'h20r', 'flex1',
								item.isRed || item.isGray ? 'backCol99c043' : 'backColEcecec'
							]" 
						>
						<!-- v-show="(index1 != (colorAry.length - 1))" -->
							<text class="poAbs h20r w2r backColDdd bom0 left0"
								v-if="index1 != 0 && !item.isRed && !item.isGray"
							></text>
						</view>
					</view>
					<view class="disFlex mt10r">
						<view v-for="(item, index) in numAry" :key="index"
							:class="['flex1', 'f20r', 'poRel',
								index == 0 ? 'leftn6r' :
								index == 1 ? 'leftn2r' :
								index == 2 ? 'left2r' :
								index == 3 ? 'left6r' :
								index == 4 ? 'left12r' :
								index == 5 ? 'left8r' :
								index == 6 ? 'left12r' :
								index == 7 ? 'left18r' :
								index == 8 ? 'left22r' :
								index == 9 ? 'left24r' :
								index == 10 ? 'left30r' :
								index == 11 ? 'left34r' :
								index == 12 ? 'rign24r' : ''
							]"
						>
							{{item}}
						</view>
					</view>
				</view>
			</view>
			<view class="mt20r borRad10r backColWhite pl20r pr20r">
				<view class="f30r h90r disFlex aliItCenter">
					<view class="flex1">
						<image :src="baseUrl + 'iconSetMealGreen.png'" mode="aspectFit"
							class="w40r h40r floLeft mr10r"
						></image>
						<text class="foWeiBold">
							套餐内容
						</text>
						<text class="f26r col999">
							（{{
								optionItem.set_meal_type == 1 ? '必选' :
								optionItem.set_meal_type == 2 ? '可选' : optionItem.set_meal_type
							}})
						</text>
					</view>
					<view class="w160r" v-if="optionItem.set_meal_type == 2 && setMealAry.length">
						<view @click="cliNoSetMeal"
							class="teAliCenter backImgLiGrTR2c6739a99c043 colFff f24r lh50r borRad25r"
						>
							清空选择
						</view>
					</view>
				</view>
				<view class="borT1SE4e6ec">
					<uni-collapse v-if="setMealAry.length">
						<radio-group @change="radioChange1">
							<view class="disFlex" v-for="item1 in setMealAry" :key="item1.id">
								<view class="w60r teAliCenter borB1SEbeef5 pt24r">
									<label class="borR1SEbeef5">
										<radio :value="item1.id" :checked="item1.id === advanceBookingObj.setMealId" color="#99c043" />
									</label>
								</view>
								<view class="flex1">
									<uni-collapse-item :title="item1.name">
										<view class="borB1DEbeef5 lh60r foWeiBold">
											套餐合计：
											<text class="colFf3627 ml10r">
												¥{{item1.price}}
											</text>
										</view>
										<view class="lh50r f24r col313131 pr30r"
											v-for="(item2, index2) in item1.content" :key="index2"
										>
											{{(index2 + 1) + '.' + item2.snacks}}：数量{{item2.quantity}}
											<text class="col999 ml10r textDecLiTh">
												原价¥{{item2.oriPrice}}
											</text>
											<text class="colFf3627 ml10r">
												套餐价¥{{item2.prePrice}}
											</text>
										</view>
									</uni-collapse-item>
								</view>
							</view>
						</radio-group>
					</uni-collapse>
					<view class="lh100r teAliCenter col999" v-if="setMealAry.length == 0">
						暂无套餐
					</view>
				</view>
			</view>
			<view class="mt20r borRad10r backColWhite pl20r pr20r">
				<view class="f30r h90r disFlex aliItCenter">
					<view class="flex1">
						<image :src="baseUrl + 'iconFacilitiesGreen.png'" mode="aspectFit"
							class="w40r h40r floLeft mr10r"
						></image>
						<text class="foWeiBold">
							服务设施
						</text>
					</view>
					<view class="w160r">
						<view @click="cliWifiBtn"
							class="teAliCenter backImgLiGrTR2c6739a99c043 colFff f24r lh50r borRad25r"
						>
							连接WiFi
						</view>
					</view>
				</view>
				<view class="borT1SE4e6ec pt20r col646464">
					<text class="disInBlo bSha0020u0rgb00002 pl30r pr30r lh50r borRad25r mr20r mb20r"
						v-for="(item1, index1) in optionItem.labels" :key="index1"
					>
						{{item1}}
					</text>
				</view>
			</view>
			<view class="mt20r borRad10r backColWhite pl20r pr20r">
				<view class="f30r lh90r foWeiBold">
					<image :src="baseUrl + 'iconBookingInstructions.png'" mode="aspectFit"
						class="w40r h40r floLeft mt24r mr10r"
					></image>
					<text>
						房间介绍
					</text>
				</view>
				<view class="borT1SE4e6ec pt20r pb20r">
					<rich-text :nodes="optionItem.remarks"
					></rich-text>
				</view>
			</view>
			<view class="poFixed h100r backColWhite bom0 left0 wPer100 disFlex aliItCenter teAliCenter foWeiBold pl20r pr20r boSiBorBox">
				<view class="flex1">
					<view class="lh70r mAuto colFff f28r backCol99c043 borRad10r wPer90"
						@click="cliAdvanceReservation"
					>
						提前预订
					</view>
				</view>
				<view class="flex1">
					<view class="lh66r mAuto col99c043 f28r bor1S99c043 borRad10r wPer90 boSiBorBox"
						@click="cliUseNow"
					>
						马上使用
					</view>
				</view>
			</view>
		</view>
		<view class="poFixed wPer100 hPer100 backCol0a0a0aS5 zIndex1 top0 left0 f26r"
			v-show="wifiFrame"
		>
			<view class="poFixed top50P left50P trTrn50Pn50P backColWhite borRad10r teAliCenter w600r pb40r">
				<view class="lh100r poRel foWeiBold f30r">
					<text>
						门店WiFi
					</text>
					<image :src="baseUrl + 'iconCloseBlack.png'" mode="aspectFit"
						class="w30r h30r poAbs rig20r top26r" @click="wifiFrame = false"
					></image>
				</view>
				<view>
					WiFi账号：{{optionItem.wifi ? optionItem.wifi[0] : ''}}
				</view>
				<view class="mt20r">
					WiFi密码：{{optionItem.wifi ? optionItem.wifi[1] : ''}}
				</view>
				<view class="mt20r">
					<view class="disInBlo w200r lh60r bor1SE4e6ec borRad10r boSiBorBox"
						@click="cliCopyPsd"
					>
						复制密码
					</view>
					<view class="disInBlo w200r lh60r backImgLiGrTR2c6739a99c043 borRad10r ml20r colFff"
						@click="cliOneBtnConnection"
					>
						一键连接
					</view>
				</view>
			</view>
		</view>
		<rightOffPage v-show="rightOffFrame" @closeRightOff="closeRightOff"
			@renovateColor="renovateColor"
			:rightOffObj="rightOffObj"
		></rightOffPage>
		<advanceBookingPage v-show="advanceBookingFrame" ref="advanceBookingPage"
			@closeAdvanceBooking="closeAdvanceBooking" @changeColor="changeColor"
			:advanceBookingObj="advanceBookingObj"
		></advanceBookingPage>
	</view>
</template>
<script>
import navbar from '@/components/navbar.vue'
import { dateLimit, mapNavigation, formatRichText } from '@/utils/utils.js'
import rightOffPage from '@/components/rightOffPage.vue'
import advanceBookingPage from '@/components/advanceBookingPage.vue'
import { buriedPoint, getTeaRoomSetMeal,
	getMemberCardruleInfo, getTaeRoomDataInfo } from '@/utils/api.js'
import { imgNetUrl, baseUrl } from '@/utils/request.js'
export default {
	components: { navbar, rightOffPage, advanceBookingPage },
	data() {
		return {
			token: '',
			baseUrl,
			optionItem: {},
			bannerList: [],
			pick1Val: '',
			setMealAry: [],
			wifiFrame: false,
			colorAry: [],
			numAry: [ 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24 ],
			rightOffFrame: false, rightOffObj: {},
			advanceBookingFrame: false, advanceBookingObj: {},
			membershipCard: {type: 0, id: ''}
		}
	},
	computed: {
		startDate() {
			return dateLimit('start');
		},
		endDate() {
			return dateLimit('', new Date(new Date().getTime() + 6 * 24 * 60 * 60 * 1000));
		}
	},
	onLoad(options) {
		this.pick1Val = dateLimit();
		if(options.item) {
			this.optionItem = JSON.parse(options.item)
			this.optionItem.labels = this.optionItem.labels.split(',');
			this.optionItem.wifi = this.optionItem.wifi.split(',');
			this.optionItem.vip_price = Math.round(Number(this.optionItem.card_discount) * Number(this.optionItem.price) * 100) / 100;
			if(this.optionItem.pic && this.optionItem.pic != '') {
				this.optionItem.pic.split(',').forEach(item => {
					this.bannerList.push(imgNetUrl + item);
				})
			}
			getTaeRoomDataInfo({
				tid: this.optionItem.tid,
				rid: this.optionItem.id
			}).then(res => {
				console.log(11, res)
				this.optionItem.remarks = formatRichText(res.data.remarks);
			})
			this.rightOffObj = {
				topIsWho: 2,
				hourMin: this.optionItem.hour,
				hourMax: 24,
				tid: this.optionItem.tid,
				rid: this.optionItem.id,
				setMealType: '2', setMealId: '', setMealMoney: 0,
				cardDiscount: this.optionItem.card_discount, originalCost: this.optionItem.price
			};
			this.advanceBookingObj = {
				topIsWho: 2,
				tid: this.optionItem.tid,
				rid: this.optionItem.id,
				hour: this.optionItem.hour,
				setMealType: '2', setMealId: '', setMealMoney: 0,
				cardDiscount: this.optionItem.card_discount, originalCost: this.optionItem.price
			}
			const token = uni.getStorageSync('token');
			if(token) {
				this.token = token;
				buriedPoint({ token, tid: this.optionItem.tid }).then(res => {//埋点，后期上线再打开
				})
				getMemberCardruleInfo({token}).then(res => {
					if(res.data && res.data.type) {
						this.membershipCard.type = res.data.type;
						if(res.data.type == 1) this.membershipCard.id = res.data.id;
					}
				})
			}else {
				this.token = '';
			}
			getTeaRoomSetMeal({rid: this.optionItem.id}).then(res => {
				if(res.data && res.data.length) {
					res.data.forEach(item1 => {
						if(item1.content && item1.content != '') {
							let newAry1 = [];
							newAry1 = item1.content.split('|');
							item1.content = [];
							newAry1.forEach(item2 => {
								item1.content.push({
									snacks: item2.split(',')[0], quantity: item2.split(',')[1],
									oriPrice: item2.split(',')[2], prePrice: item2.split(',')[3]
								})
							})
							if(item1.type == '1') this.setMealAry.push(item1);
						}
					})
				}
				if(this.optionItem.set_meal_type == 1) {
					this.rightOffObj.setMealType = '1';
					this.rightOffObj.setMealId = this.setMealAry.length ? this.setMealAry[0].id : '';
					this.rightOffObj.setMealMoney = this.setMealAry.length ? this.setMealAry[0].price : 0;
					this.advanceBookingObj.setMealType = '1';
					this.advanceBookingObj.setMealId = this.setMealAry.length ? this.setMealAry[0].id : '';
					this.advanceBookingObj.setMealMoney = this.setMealAry.length ? this.setMealAry[0].price : 0;
				}
			})
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		changeColor(colorAry) {
			this.colorAry = colorAry;
		},
		cliBannerImg(type, current) {
			if(type == 0) {
				uni.previewImage({
					current, urls: this.bannerList
				})
			}else {
				uni.previewImage({
					current: 0, urls: ['/static/images/logo.png']
				})
			}
		},
		cliAddress() {//跳转可导航的地图
			console.log('11', this.optionItem);
			// mapNavigation(24.88946, 118.613);
		},
		cliPhoneGray() {
			uni.makePhoneCall({
				phoneNumber: '800-820-8820',
				success:res => {
					if(res) console.log(11, res)
				}
			});
		},
		cliNoSetMeal() {
			this.rightOffObj.setMealId = '';
			this.rightOffObj.setMealMoney = 0;
			this.advanceBookingObj.setMealId = '';
			this.advanceBookingObj.setMealMoney = 0;
		},
		radioChange1(evt) {
			console.log(11, this.setMealAry)
			this.rightOffObj.setMealId = evt.detail.value;
			this.advanceBookingObj.setMealId = evt.detail.value;
			for(let index = 0;index < this.setMealAry.length;index++) {
				if(evt.detail.value == this.setMealAry[index].id) {
					this.rightOffObj.setMealMoney = this.setMealAry[index].price;
					this.advanceBookingObj.setMealMoney = this.setMealAry[index].price;
					break;
				}
			}
		},
		cliWifiBtn() {
			this.wifiFrame = true;
		},
		cliCopyPsd() {
			uni.setClipboardData({
				data: this.optionItem.wifi[1],
				success:() => {
					this.wifiFrame = false;
				}
			});
		},
		cliOneBtnConnection() {
			uni.getSystemInfo({// 获取手机型号
				success:res1 => {
					let system = '';
					if(res1.platform == 'android'){
						system = parseInt(res1.platform.substr(8))
					}
					if(res1.platform =='ios'){
						system = parseInt(res1.platform.substr(4))
					}
					if(res1.platform == 'android' && system < 6){
						return uni.showToast({
							title:'手机版本不支持', icon:'none', duration: 3000
						})
					}
					if(res1.platform == 'ios' && system < 11.2){
						return uni.showToast({
							title:'手机版本不支持', icon:'none', duration: 3000
						})
					}
					uni.showLoading({ title: 'WiFi连接中...' })
					uni.startWifi({
						success:res2 => {
							uni.connectWifi({
								SSID: this.optionItem.wifi[0],
								password: this.optionItem.wifi[1],
								success:res3 => {
									this.wifiFrame = false;
									uni.hideLoading();
									uni.showToast({ title: "连接成功", duration: 3000 })
								},
								fail:err3 => {
									uni.hideLoading();
									uni.showToast({
										title:'连接失败：' + err3.errMsg, icon: 'none', duration: 3000
									})
								}
							})
						},
						fail:err2 => {
							uni.hideLoading();
							uni.showToast({
								title: '连接失败：' + err2.errMsg, icon: 'none', duration: 3000
							})
						}
					})
				}
			})
		},
		pick1Change(eee) {
			this.pick1Val = eee.detail.value
		},
		cliAdvanceReservation() {
			if(this.token) {
				this.advanceBookingFrame = true;
			}else {
				uni.navigateTo({ url: '/pages/personalCenter/login?type=2' })
			}
		},
		closeAdvanceBooking() {
			this.advanceBookingFrame = false;
		},
		cliUseNow() {
			if(this.token) {
				this.rightOffFrame = true;
			}else {
				uni.navigateTo({ url: '/pages/personalCenter/login?type=2' })
			}
		},
		closeRightOff() {
			this.rightOffFrame = false;
		},
		renovateColor() {
			this.$refs['advanceBookingPage'].renovateColor();
		}
	}
}
</script>
<style>
</style>